<template>
  <div class="card-title-wrapper">
    <span class="title-text">{{ cardTitle }}（{{ count }}）</span>
    <el-button @click="handleLoad" icon="Refresh" circle link></el-button>
  </div>
  <div :class="['wrapper', 'card-wrapper-normal', darkMode ? 'card-wrapper-dark' : 'card-wrapper-light']">
    <el-scrollbar height="100%">
      <div class="content-wrapper">
        <div :class="['unit-wrapper', darkMode ? 'unit-wrapper-dark' : 'unit-wrapper-light']"
          v-for="unit in activityData">
          <div class="unit-title">{{ unit.title }}</div>
          <div class="unit-content-container">
            <el-scrollbar height="100%">
              <el-button text plain class="unit-content" v-for="cell in unit.content" @click="showDetail(cell)">{{
                  cell.shortName
              }}
              </el-button>
              <el-button text plain v-if="unit.content.length == 0" @click="showWarning">无
              </el-button>
            </el-scrollbar>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
  <!-- <div>{{ JSON.stringify(activityList, null, 4) }}</div> -->
  <LoadData ref="loadData" />
</template>

<script setup>
// import vue components
import { h, ref, computed, nextTick } from "vue";
import { ElMessage, ElMessageBox, ElDescriptions, ElDescriptionsItem } from 'element-plus'
// import load data components
import LoadData from "../LoadData"

// import stores
import useActivityStore from '@/store/activity';
import useCommonStore from '@/store/common';

// define stores
const activityStore = useActivityStore();
const commonStore = useCommonStore();
const activityList = activityStore.militaryStatus;

// card title
const cardTitle = ref("空军活动");
const count = ref(0);

// dark mode variable from common store
const darkMode = computed(() => {
  return commonStore.darkMode;
});

// load data component
const loadData = ref(null);
const loadMilitaryData = () => { loadData.value.loadMilitaryData(); };
function handleLoad() {
  // console.log('loadData.value', loadData.value);
  // console.log('loadData', loadData);
  loadMilitaryData();
}

// show detail
function showDetail(cell) {
  let detail = [];
  detail.push(h(ElDescriptionsItem, { label: '名称', minWidth: '80px' }, () => cell.name));
  // detail.push(h(ElDescriptionsItem, { label: '单位', minWidth: '80px' }, () => cell.unit));
  detail.push(h(ElDescriptionsItem, { label: 'ATD', minWidth: '80px' }, () => cell.fullATD));
  detail.push(h(ElDescriptionsItem, { label: '起飞', minWidth: '80px' }, () => cell.depField));
  detail.push(h(ElDescriptionsItem, { label: '落地', minWidth: '80px' }, () => cell.arrField));
  detail.push(h(ElDescriptionsItem, { label: '航路', minWidth: '80px' }, () => cell.route));
  detail.push(h(ElDescriptionsItem, { label: '备注', minWidth: '80px' }, () => cell.remark));
  ElMessageBox({
    title: /*cell.unit + ' ' + cell.name +*/ ' 活动详情',
    message: h(ElDescriptions, { column: 1, border: true, size: '' }, () => detail),
    draggable: true,
  });
}
function showWarning() {
  ElMessage({ message: '别点了，啥也没有~' });
}


// fetch data
const activityData = computed(() => fetchData());
function fetchData() {

  let unitList = commonStore.isReal?['太平寺', '温江', '邛崃', '彭州', '夹江', '广汉', '遂宁', '新津', '绵阳', '中江', '泸州', '大足', '白市驿']:['AAA', 'BB', 'CC', 'DD', 'EE', '广汉', '遂宁', '新津', '绵阳', 'FF', 'GG', 'HH', 'III'];
  let output = [];
  for (let i = 0; i < unitList.length; i++) {
    let title = unitList[i];
    let content = [];
    for (let j = 0; j < activityList.length; j++) {
      // activityList[j].unit == unitList[i] || 
      if (activityList[j].arrField == unitList[i] || activityList[j].depField == unitList[i]) {
        // activityList[j].name = activityList[j].name.replace('CD', '').replace('P', '');
        activityList[j]['shortName'] = activityList[j].name.replace(/[^0-9]/ig, "");
        content.push(activityList[j]);
      }
    }
    // content.sort((a, b) => a.name.replace(/[^0-9]/ig, "") - b.name.replace(/[^0-9]/ig, ""));
    content.sort((a, b) => a.shortName - b.shortName);
    output.push({ title, content });
    if (content.length > 0) { count.value++; }
  }
  return output;
}

</script>

<style scoped>
.wrapper {
  height: 340px;
  margin-bottom: 24px;
  padding: 0 6px;
}

.content-wrapper {
  height: 320px;
  display: flex;
  justify-content: space-between;
  align-items: top;
  padding-top: 12px;
}


.unit-wrapper {
  height: 100%;
  min-width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.unit-wrapper-dark {
  border-right: 1px dotted #1D1E1F;
}

.unit-wrapper-light {
  border-right: 1px dotted #CFD3DC;
}

.unit-wrapper:last-child {
  border: none;
}

.unit-title {
  margin-bottom: 12px;
  font-weight: bold;
  font-size: 16px;
  color: #525f7f;
  width: 100%;
  text-align: center;
}

.unit-content-container {
  display: flex;
  width: 100%;
  height: calc(100% - 36px);
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  margin-left: 12px;
  /* overflow-y: auto; */
}

.unit-content {
  font-size: 20px;
  /* font-family: "Consolas"; */
  /* font-family: "Cascadia"; */
  /* font-family: "Monaco"; */
  font-family: "Source Code Pro";
  /* font-family: "Courier New"; */
  font-weight: bold;
  /* font-weight: lighter; */
  width: calc(100% - 12px);
  height: 30px;
  padding: 0 auto;
  margin: 0;
  letter-spacing: 2px;
}
</style>